<template>
  <div class="view">
    <div class="container">
      <!--带筛选表格组件-->
      <table-list :data="listData"
                  :column-cfg="columnCfg"
                  :total-size="totalSize"
                  :page-size="filterParams.pageSize"
                  :loading="dataLoading"
                  @refresh-list="getList"
                  @custom-fn="handleCustom">
        <!--默认插槽将会显示到筛选及表格之间-->
        <div class="view-button">
          <span>在筛选及表格间插入内容示例：</span>
          <el-button icon="el-icon-document-add" type="primary" @click="handleCustom">自定义按键
          </el-button>
        </div>
        <!--自定义筛选输入内容需要从代码中手动进行数据提交-->
        <template slot="customName">
          <el-input placeholder="请输入内容" v-model="input1">
            <el-select v-model="select1" slot="prepend" placeholder="请选择" style="width: 100px;">
              <el-option label="选项1" value="1"></el-option>
              <el-option label="选项2" value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </template>
        <!--自定义列-->
        <template v-slot:custom="{row}">
          <el-input v-model="row.userId"></el-input>
        </template>
      </table-list>
    </div>
    <!--  详情对话框  -->
    <custom-detail ref="customDetail" @data-change="getList"></custom-detail>
  </div>
</template>

<script>
/**
 * 自定义表格示例
 * 默认表格功能不满足时，可以使用插槽及自定义方法进行扩展
 */
import TableList from '@/components/TableList/index'
import CustomDetail from "./components/CustomDetail";

import {list, batchDelete} from "@/api/system/user";

import ListAction from '@/views/_mixins/list-action'

export default {
  name: 'TableDefault',
  mixins: [ListAction],
  components: {
    TableList,
    CustomDetail
  },
  props: {},
  data() {
    return {
      list: list,
      batchDelete: batchDelete,
      idLabel: 'userId',
      deleteTip: '此操作将永久删除该用户, 是否继续?',
      filterParams: {pageSize: 10}, //筛选条件，每次更新会保存使用的筛选条件
      columnCfg: {
        'userName': {
          label: '登录名', width: '200',
          filter: {type: 'input', placeholder: '请输入登录名'},
        },
        'realName': {
          label: '昵称', width: '200',
          filter: {type: ':slot', slot: 'customName', placeholder: '请输入登录名'},
        },
        'enable': {
          label: '用户状态', dictKey: 'data_status', tag: 'normal', width: '140', align: 'center',
          filter: {type: 'select'}
        },
        'createTime': {
          label: '创建时间', sortable: 'custom', style: {'font-size': '12px'},
          filter: {type: 'date-picker', pickerType: 'daterange'}
        },
        'tel': {
          label: '手机号码',
        },
        'demoCol':{
          label: '自定义列', slotName: 'custom'
        },
        ':action': {
          label: '操作',
          actionArr: [
            {
              label:'自定义按钮',
              event: "custom-fn",
              btnType: "",
              icon: 'el-icon-picture-outline'
            },
          ]
        },
      },
  
      input1: '',
      select1: '2'
    }
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 筛选数据前置处理
     * 输入框返回数据与接口要求不一致或自定义筛选内容时，可以通过此方法进行前置处理
     */
    filterParamsHandle(){
      console.log('默认筛选请求数据: ', this.filterParams)
      this.filterParams.realName = this.select1 + this.input1
    },
    /**
     * 列数据处理
     * 接口请求到的数据与表格显示数据格式不一致时可以通过此方法进行处理
     * 自定义的数据需要赋值给listData变量用于表格内容显示
     * @param rows
     */
    rowDataHandle(rows){
      console.log('ajax请求返回原始数据： ', rows)
      this.listData = rows.map(function (item) {
        if(item.tel){
          item.tel = '****'+item.tel.substr(-4, 4)
        }
        return item
      })
    },
    /**
     * 自定义按钮响应方法
     * @param row
     */
    handleCustom(row){
      console.log('点击行数据： ', row)
      this.$refs.customDetail.show(row)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>